<!-- 首页 -->
<template>
  <view class="container">
		<view class="top">
    <home-head></home-head>
    <swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<navigator :url="item.url" hover-class="none" class="swiper-item">
						<image :src="item.img" class="banner"></image>
					</navigator>
				</swiper-item>
			</swiper>

      <view class="notice-box">
			<u-notice-bar speed="100" mode="vertical" type="none" :list="noticeList" :more-icon="true" color="#333333" bg-color="#F4F6F8" border-radius="45"></u-notice-bar>
		</view>

    <!-- 头部按钮 start -->
		<view class="nav">
			<u-grid :col="4" :border="false">
				<u-grid-item bg-color="transparent" v-for="(item, index) in navButton" :key="index">
					<view class="nav-item" @click="jump(index,item.url)">
						<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						<view class="nav-item-name">{{ item.name }}</view>
					</view>
					
				</u-grid-item>
			</u-grid>
		</view>
		</view>
		<!-- 头部按钮 end -->
    <view class="bottom">
			<!-- 三个币种 start -->
			<coin-tab></coin-tab>

			<home-asset></home-asset>

			<!-- 默认前十种币种 start-->
			<view hidden>
				<coin-list ></coin-list>
			</view>
			
			<!-- 默认前十种币种 end-->

    </view>
    
 
  </view>
</template>

<script>
import homeHead from '@/components/home/home-head.vue';
import coinList from '@/components/home/coin-list.vue';
import homeAsset from '@/components/home/home-asset.vue';
import coinTab from '@/components/home/coin-tab';

export default {
  components: {
			coinList,
			coinTab,
			homeAsset,
			homeHead
		},
  data () {
    return {
      // 头部导航
				navButton: [{
						name: "策略商城",
						img: "/static/home/home_shangcheng@2x.png",
						url: "/pages/coin/quantization",
					},
					{
						name: "邀请有礼",
						img: "/static/home/home_yaoqing@2x.png",
						url: "/pages/my/invite/invite",
					},
					{
						name: "充值中心",
						img: "/static/home/home_chongzhi@2x.png",
						url: "/pages/my/charge/charge",
					},
					{
						name: "我的策略",
						img: "/static/home/home_celve@2x.png",
						url: "/pages/coin/quantization",
					},
				],
      bannerList: [{
				id: '1',
				img: '/static/home/home_banner@2x.png',
				url: ''
			},
      {
				id: '2',
				img: '/static/home/home_banner@2x.png',
				url: ''
			}],
      noticeList:["巴西“比特币大王”被捕，涉嫌侵占3亿美元资产",
					"DeFi半年报：独立地址增速放缓，但总锁仓量仍增长超300%",]
    };
  },

  computed: {},

  onLoad(){
		this.test()
  },
  mounted() {
    console.log('index', this.$u.config.v);
  },

  methods: {
		test(){
			this.$http.get('aqie-app/appupdate/detail',{id:1}).then(res=> {
				console.log('res', res)
			})
		},
			jump(index, url) {
				if(index == 1 || index == 2){
					this.$u.func.route(url)
				} else if(index == 3){
					uni.$emit('current',{msg:1})
					this.$u.func.route2(url)
				} else {
					uni.$emit('current',{msg:0})
					this.$u.func.route2(url)
				}
				
			}
	}
}

</script>
<style lang='scss' scoped>
.container {
	min-height: 100vh;
	background-color: #f4f6f8;
	.top {
		margin: 0 30rpx;
	}
  .banner {
		background-color: #fff;
    width: 690rpx;
    height: 299rpx;
  }
  .notice-box {
		box-sizing: border-box;
		background-color: #fff;
    margin:10rpx 0 0 0;
    // background: #F4F6F8;
    border-radius: 45rpx;
  }
  // <!-- 头部按钮 start -->
	.nav {
		background-color: #fff;
    width: 100%;
		// margin: 20rpx 0 0 0;
		box-sizing: border-box;
		padding: 0 0rpx;
    .u-grid {
      width: 100%;
    }

		&-item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;

			&-img {
				width: 61rpx;
				height: 54rpx;
			}

			&-name {
				font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
			}
		}
	}
  .bottom {
    background-color: #f4f6f8; // f4f6f8
		padding-top: 20rpx;
  }

}
</style>